<template>
  <el-form
    :model="formModel"
    :rules="mergedRules"
    ref="formRef"
    label-width="80px"
    class="base-form"
  >
    <el-row :gutter="rowGutter">
      <el-col
        v-for="item in schema"
        :key="item.prop"
        :required="item.required"
        :span="item.span"
      >
        <el-form-item
          :label="item.label"
          :required="item.required"
          :prop="item.prop"
        >
          <!-- 输入框 -->
          <template v-if="item.type === 'input'">
            <el-input
              v-model="formModel[item.prop]"
              :placeholder="item.placeholder || '请输入'"
              :disabled="item.disabled"
            />
          </template>

          <!-- 文本域 -->
          <template v-else-if="item.type === 'textarea'">
            <el-input
              type="textarea"
              v-model="formModel[item.prop]"
              :placeholder="item.placeholder || '请输入'"
              :rows="item.rows || 4"
            />
          </template>

          <!-- 下拉选择器 -->
          <template v-else-if="item.type === 'select'">
            <el-select
              v-model="formModel[item.prop]"
              :placeholder="item.placeholder || '请选择'"
              :disabled="item.disabled"
            >
              <el-option
                v-for="opt in item.options"
                :key="opt.value"
                :label="opt.label"
                :value="opt.value"
              />
            </el-select>
          </template>

          <!-- 开关 -->
          <template v-else-if="item.type === 'switch'">
            <el-switch v-model="formModel[item.prop]" />
          </template>

          <!-- 可扩展其他类型：日期选择器、时间选择器等 -->
          <template v-else-if="item.type === 'date-picker'">
            <el-date-picker
              v-model="formModel[item.prop]"
              type="date"
              :placeholder="item.placeholder || '请选择日期'"
            />
          </template>
        </el-form-item>
      </el-col>
    </el-row>
    <!-- 表单操作按钮 -->
    <div class="form-footer">
      <el-form-item>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
        <el-button @click="handleReset">取消</el-button>
      </el-form-item>
    </div>
  </el-form>
</template>

<script setup>
import { ref, reactive, computed } from "vue";

// 接收父组件传递的参数
const props = defineProps({
  // 表单绑定的模型数据
  model: {
    type: Object,
    required: true,
  },
  // 表单项配置（核心：描述每个表单项的类型、标签、prop 等）
  schema: {
    type: Array,
    required: true,
  },
  // 表单校验规则
  rules: {
    type: Object,
    default: () => ({}),
  },
  rowGutter: {
    type: Number,
    default: 16,
  },
});

// 向父组件触发事件
const emit = defineEmits(["submit", "reset"]);

// 表单引用（用于调用 Element Plus 表单的验证、重置方法）
const formRef = ref();
// 响应式表单模型（深拷贝父组件的 model，避免直接修改父数据）
const formModel = reactive({ ...props.model });

// 合并“全局规则”与“表单项自身的必填规则”
const mergedRules = computed(() => {
  const result = { ...props.rules };
  props.schema.forEach((item) => {
    if (item.required && !result[item.prop]) {
      // 若表单项标记为“必填”且无自定义规则，则添加默认必填规则
      result[item.prop] = [
        { required: true, message: `请输入${item.label}`, trigger: "blur" },
      ];
    }
  });
  return result;
});

// 提交表单（含验证）
const handleSubmit = () => {
  formRef.value.validate((isValid) => {
    if (isValid) {
      emit("submit", formModel); // 验证通过，触发 submit 事件并传递表单数据
    }
  });
};

// 重置表单
const handleReset = () => {
  formRef.value.resetFields(); // 调用 Element Plus 表单的重置方法
  emit("reset"); // 触发 reset 事件，父组件可做额外处理
};
</script>

<style scoped>
.base-form {
  width: 100%;
  margin: 0 auto;
  margin-top: 15px;
}
.form-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
}
</style>